<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <div class="logo">电商平台</div>
      <input type="text" placeholder="搜索商品" class="search-input" @input="handleSearch" />
      <div class="nav-links">
        <router-link to="/cart" class="nav-link">购物车</router-link>
        <router-link to="/login" class="nav-link">登录/注册</router-link>
      </div>
    </header>

    <!-- 轮播图（Swiper） -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(slide, idx) in slides" :key="idx">
          <img :src="slide.image" alt="轮播图" class="slide-img" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- 商品分类导航 -->
    <div class="category-nav">
      <div class="category-item" v-for="(cat, idx) in categories" :key="idx">
        <img :src="cat.icon" alt="分类图标" class="cat-icon" />
        <span class="cat-name">{{ cat.name }}</span>
      </div>
    </div>

    <!-- 热卖商品 -->
    <div class="product-section">
      <h2 class="section-title">热卖商品</h2>
      <div class="product-grid">
        <div class="product-card" v-for="(prod, idx) in hotProducts" :key="idx">
          <img :src="prod.image" alt="商品图片" class="prod-img" />
          <h3 class="prod-name">{{ prod.name }}</h3>
          <p class="prod-price">￥{{ prod.price }}</p>
          <button class="btn-add-cart" @click="addToCart(prod)">加入购物车</button>
        </div>
      </div>
    </div>

    <!-- 底部信息栏（示例） -->
    <footer class="footer">
      <div class="footer-links">
        <a href="/about">关于我们</a>
        <a href="/help">帮助中心</a>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

// 轮播图数据 - 使用网上示例图片
const slides = ref([
  { image: 'https://picsum.photos/id/1048/1200/400' },
  { image: 'https://picsum.photos/id/26/1200/400' },
]);

// 分类数据 - 使用网上示例图标
const categories = ref([
  { name: '电子产品', icon: 'https://picsum.photos/id/96/30/30' },
  { name: '服装', icon: 'https://picsum.photos/id/103/30/30' },
  { name: '家居', icon: 'https://picsum.photos/id/106/30/30' },
]);

// 热卖商品数据 - 使用网上示例图片
const hotProducts = ref([
  { id: 1, name: '智能手表', price: 199, image: 'https://picsum.photos/id/1/250/200' },
  { id: 2, name: '纯棉T恤', price: 99, image: 'https://picsum.photos/id/103/250/200' },
]);

// 初始化轮播图
onMounted(() => {
  new Swiper('.swiper-container', {
    pagination: { el: '.swiper-pagination' },
    autoplay: { delay: 3000 },
    loop: true,
  });
});

// 搜索处理
const handleSearch = (e) => {
  console.log('搜索关键词:', e.target.value);
  // 调用API搜索商品（后续实现）
};

// 加入购物车（后续用Vuex实现）
const addToCart = (product) => {
  console.log('加入购物车:', product);
};
</script>

<style scoped>
.home-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.search-input {
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  width: 300px;
  outline: none;
}

.nav-link {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.nav-link:hover {
  color: var(--primary-color);
}

.swiper-container {
  height: 400px;
  margin-bottom: 30px;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-nav {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s;
}

.category-item:hover {
  transform: translateY(-3px);
}

.cat-icon {
  width: 30px;
  height: 30px;
}

.product-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--secondary-color);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.prod-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 15px;
}

.prod-name {
  font-size: 18px;
  margin-bottom: 10px;
}

.prod-price {
  font-size: 20px;
  color: #e4393c;
  margin-bottom: 15px;
}

.btn-add-cart {
  background: var(--primary-color);
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-add-cart:hover {
  background: #35906c;
}

.footer {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #eee;
  color: #777;
}

.footer-links a {
  margin: 0 10px;
  color: #777;
  text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-nav {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .search-input {
    width: 100%;
  }

  .category-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }
}
</style>  